import React, { useState, useEffect } from "react";
import styles from "./index.module.css";
import { Button, Flex } from "antd";
import Icon from "../../../common/Icon";

const SecondMenu: React.FC = () => {
  const [activeItem, setActiveItem] = useState("Store");
  const [blur, setBlur] = useState(false);
  const menuItems = ["Library", "For You", "Browse", "Radio", "Store"];

  useEffect(() => {
    const onBlur = () => setBlur(true);
    const onFocus = () => setBlur(false);
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return () => {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, []);

  return (
    <Flex className={`${styles.secondMenu}`} justify="center" align="center">
      <Flex justify="center" gap={2}>
        {menuItems.map((item) => (
          <Button
            key={item}
            type={"text"}
            className={`${styles.navItem} ${
              activeItem === item && !blur ? styles.active : ""
            } ${blur && item=== activeItem ? styles.blur1 : ''} `}
            onClick={() => setActiveItem(item)}
          >
            {item}
          </Button>
        ))}
      </Flex>

      <Flex className={styles.leftSection}>
        <Flex align="center">
          <Button className={styles.navButton}>
            <Icon src="/images/后退.png" style={{ width: 13, height: 10 }} />
          </Button>
          <Button className={styles.navButton}>
            <Icon src="/images/前进.png" style={{ width: 13, height: 10 }} />
          </Button>
        </Flex>
        <Flex className={styles.musicSelect} align="center" gap={10}>
          <Icon src="/images/音乐.png" style={{ width: 16, height: 16 }} />
          <span>Music</span>
          <Icon
            src="/images/上下拉.png"
            style={{
              marginLeft: 36,
              width: 12,
              height: 13,
            }}
          />
        </Flex>
      </Flex>
    </Flex>
  );
};

export default SecondMenu;
